<template>
    <div>
        <el-submenu v-if="aside.children && aside.children.length !== 0" :index="`${index}`" :key="index">
            <template slot="title">
                <i :class="aside.icon"></i>
                <span slot="title">{{aside.title}}</span>
            </template>
            <template v-for="(childItem, childIndex) of aside.children">
                <aside-item :aside="childItem" :key="childIndex" :index="index + '-' + childIndex"></aside-item>
            </template>
        </el-submenu>

        <el-menu-item v-else :index="`/${language}${aside.path}`">
            <i :class="aside.icon"></i>
            <span slot="title">{{aside.title}}</span>
        </el-menu-item>
    </div>
</template>

<script>
    export default {
        name: "AsideItem",
        props: {
            aside: {
                type: Object,
                required: true
            },
            index: [Number, String]
        },
        computed: {
            language() {
                return this.$store.state.lang.language
            },
        }
    }
</script>

<style scoped>

</style>